<template>
  <n-modal v-model:show="showModal">
    <n-card
      style="width: 600px"
      title="上传文件"
      :bordered="false"
      size="medium"
      role="dialog"
      aria-modal="true"
      preset="dialog"
    >
      <n-upload
        multiple
        directory-dnd
        :action="`${BASE_URL}/admin/storage/file/upload`"
        :max="5"
        :data="handleUploadData"
        :headers="headers"
        @finish="handleFinish"
      >
        <n-upload-dragger>
          <div style="margin-bottom: 12px">
            <n-icon size="48" :depth="3">
              <archive-icon />
            </n-icon>
          </div>
          <n-text style="font-size: 16px">
            点击或者拖动文件到该区域来上传
          </n-text>
          <n-p depth="3" style="margin: 8px 0 0 0">
            请不要上传敏感数据，如违规则进行封号处理
          </n-p>
        </n-upload-dragger>
      </n-upload>
      <!-- <template #footer> 尾部 </template> -->
    </n-card>
  </n-modal>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { defineComponent } from "vue";
import { ArchiveOutline as ArchiveIcon } from "@vicons/ionicons5";
import { BASE_URL } from "@/config";
import { useMessage } from "naive-ui";
const message = useMessage();
const props = defineProps({
  path: {
    type: String,
  },
});
const headers = ref({
  Authorization: localStorage.getItem("token"),
});
// const uploadData = ref({
//   path: "1/123/213/",
// });
const handleUploadData = (data: any) => {
  // console.log(data);
  // data["data"] = "/123/123/123";
  // data["file"]["file"]["filename"] = "/123/123/123";
  return { path: props.path };
};
const showModal = ref(false);
const handleFinish = (e: any) => {
  // console.log(e);
  const data = JSON.parse(e.event.currentTarget.response);
  console.log(data);
  if (data.code != 1000) {
    message.error(`文件上传失败:${data.message}`);
  } else {
    {
      message.success(`文件上传成功`);
    }
  }
};
const open = () => {
  showModal.value = true;
};
const hide = () => {
  showModal.value = false;
};
defineExpose({ open, hide });
</script>

<style lang="scss" scoped></style>
